<template>
  <div style="display: flex;justify-content: center;align-items: center">
    <van-nav-bar
        left-arrow
        left-text="返回"
        title="我的钱包"
        style="width: 100%;"
        @click-left="back"
    />
  </div>

  <van-row>
    <van-col span="8">
      <h3>我的信用点</h3>
    </van-col>
    <van-col span="8">

    </van-col>
    <van-col span="8">
      <h5 @click="selectTrade()">消费/充值记录<van-icon name="arrow" /></h5>
    </van-col>
  </van-row>

<!--  <van-cell-group inset class="custom-cell-group">-->
<!--    <van-cell title="信用点" :value=user.amount />-->
<!--    <van-button type="default" style="width: 100%" @click="">充值</van-button>-->
<!--  </van-cell-group>-->

  <van-cell-group inset class="custom-cell-group">
    <van-cell class="credit-cell" title="信用点" :value="user.amount">
      <template #right-icon>
        <van-icon name="gold-coin-o" color="#FFD700" class="icon-margin" />
      </template>
    </van-cell>
    <van-button type="info" class="recharge-button" @click="handleRecharge">充值</van-button>
  </van-cell-group>


  <!-- 优惠券单元格 -->
  <van-coupon-cell
      :coupons="coupons"
      :chosen-coupon="chosenCoupon"
      @click="showList = true"
  />
  <!-- 优惠券列表 -->
  <van-popup
      v-model:show="showList"
      round
      position="bottom"
      style="height: 90%; padding-top: 4px;"
  >
    <van-coupon-list
        :coupons="coupons"
        :chosen-coupon="chosenCoupon"
        :disabled-coupons="disabledCoupons"
        @change="onChange"
        @exchange="onExchange"
    />
  </van-popup>

</template>

<script setup>
import {onMounted, ref} from "vue";
import request from "@/assets/js/mobileRequest";
import qs from "qs";
import router from "@/router";
import {showFailToast} from "vant";

const loginUser = ref();

const back = () => {
  router.back();
}

const amount = ref('');

const checkedRef = ref(false);

const user = ref({
  userId:'',
  nickname:'',
  amount:''
});

onMounted(() => {
  loadUser();
})

const loadUser = ()=>{
  request.get(BASE_URL + '/v1/user/selectCurrent?userId='+loginUser.value.userId).then((response) => {
    if (response.data.code === 2000) {
      user.value = response.data.data;
      loginUser.value = response.data.data;
      console.log(user.value);
    }
    else {
      showFailToast(response.data.message);
    }
  })
}

</script>

<style scoped>

.custom-cell-group {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.credit-cell {
  font-size: 16px;
  color: #333;
}

.icon-margin {
  margin-left: 8px;
  margin-top: 4px;
}

.recharge-button {
  width: 100%;
  border: none;
  background-image: linear-gradient(to right, #ff69b4, #ff1493);
  color: white;
  font-size: 16px;
  height: 44px;
  border-radius: 4px;
  margin-top: 10px;
}

.recharge-button:active {
  background-image: linear-gradient(to right, #f38843, #e61616);
}
</style>